.chart{
    background-color: #222;
    position: relative;
    .vgl{
        width:0px;
        border-left-color: #555;
        border-left-width: 1px;
        border-left-style: dotted;
        height: 100%;
        float:left;
        position:absolute;
        &.strong{
            border-left-color: #999;
        }
    }
    .hgl{
        height: 0px;
        border-bottom-color: #555;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        width: 100%;
        float:left;
        position:absolute;
    }
    .bar{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgb(150,150,150);
        background-color: rgba(150,150,150,0.7);
        position:absolute;
        bottom:0;
        cursor: pointer;
        font-size: 11px;
        padding:5px;
        word-break: break-all;
        overflow: hidden;
        &.highlight{
            background-color: rgb(255,211,0);
            background-color: rgba(255,211,0,0.7);
        }
        &.class_1{
            background-color: rgb(255,211,0);
            background-color: rgba(255,211,0,0.7);
        }
        &.class_2{
            background-color: rgb(255,255,0);
            background-color: rgba(255,255,0,0.7);
        }
        &.class_3{
            background-color: rgb(255,170,0);
            background-color: rgba(255,170,0,0.7);
        }
    }
    .label{
        position:absolute;
        font-size: 11px;
        color:#aaa;
        display:block;
        &.y{
            width:45px;
            text-align: right;
            left:-50px;
            padding-right:5px;
        }
        &.x{
            bottom:-20px;
            text-align: left;
            width:110px;
        }
    }
}
#activitiesLiveDataChart{
    width:92%;
    height:85%;
    margin:0% 2% 5% 8%;
}
#gantHolder{
    margin:2% 0 0 2%;
    width:90%;
    height:90%;
}